<link rel="stylesheet" href="__CDN__/assets/addons/groupon/libs/element/element.css">
<link rel="stylesheet" href="__CDN__/assets/addons/groupon/libs/common.css">
<style>
    #storeIndex {
        background: #fff;
        border-radius: 10px 10px 0px 0px;
        color: #444;
        font-weight: 500;
    }
    .btn-common {
        width: 88px;
        height: 32px;
        line-height: 32px;
        border-radius: 4px;
        font-size: 12px;
        text-align: center;
        cursor: pointer;
        display: inline-block;
    }

    .close-status,
    .open-status {
        text-align: center;
    }

    .close-status {
        color: #666;
    }

    .open-status,
    .edit-btn-text {
        color: #7438D5;
    }

    .close-status,
    .delete-btn-text {
        color: #FF5959;
    }

    .opt-container>div {
        margin-right: 14px;
    }

    [v-cloak] {
        display: none
    }
</style>
<script src="__CDN__/assets/addons/groupon/libs/vue.js"></script>
<script src="__CDN__/assets/addons/groupon/libs/element/element.js"></script>
<script src="__CDN__/assets/addons/groupon/libs/moment.js"></script>
<div id="storeIndex" v-cloak v-loading="allAjax">
    <div class="common-header-container">
        <div>
            自提点管理
        </div>
        <div class="common-header-search">
            <el-input v-model="searchKey" placeholder="请输入自提点名称" suffix-icon="el-icon-search" size="small"></el-input>
        </div>
    </div>
    <div class="common-button-container display-flex-b">
        <div class="display-flex">
            <div class="common-refresh-button" @click="getData">
                <i class="el-icon-refresh"></i>
            </div>{if condition = "$auth->check('groupon/store/store/add')"}
            <div class="common-button common-add-button" @click="operation('create',null)"><i class="el-icon-plus"></i>创建自提点</div>
            {/if}
        </div>
        {if condition = "$auth->check('groupon/store/store/recyclebin')"}
        <div class="common-button common-recycle-button" @click="operation('recycle',null)">
            <i class="fa fa-recycle"></i>
            回收站
        </div>
        {/if}
    </div>
    <div v-loading="tableAjax">
        <div class="common-table-container">
            <el-table :data="storeData" border>
                <el-table-column prop="id" label="ID" width="60">
                </el-table-column>
                <el-table-column label="自提点名称" min-width="180">
                    <template slot-scope="scope">
                        <div class="ellipsis-item">
                            {{scope.row.name}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="自提点地址" min-width="320">
                    <template slot-scope="scope">
                        <div class="ellipsis-item">
                            {{scope.row.province_name}}{{scope.row.city_name}}{{scope.row.area_name}}{{scope.row.address}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="realname" label="联系人" width="100">
                    <template slot-scope="scope">
                        <div class="ellipsis-item">
                            {{scope.row.realname}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="phone" label="联系电话" width="120">
                </el-table-column>
                <el-table-column prop="openhours" label="营业时间" width="100">
                </el-table-column>
                <el-table-column label="操作" min-width="160" fixed="right">
                    <template slot-scope="scope">
                        <div class="opt-container display-flex">
                            <div class="cursor-pointer" :class="scope.row.status==1?'open-status':'close-status'"
                                @click="operation('status',scope.row.id,scope.row.status)">
                                {{scope.row.status_text}}
                            </div>
                            {if condition = "$auth->check('groupon/store/store/edit')"}
                            <div class="edit-btn-text cursor-pointer" @click="operation('edit',scope.row.id)">
                                编辑
                            </div>
                            {/if}
                            {if condition = "$auth->check('groupon/store/store/del')"}
                            <div class="delete-btn-text cursor-pointer" @click="operation('delete',scope.row.id)">
                                删除
                            </div>
                            {/if}
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="common-pagination-container">
            <el-pagination @size-change="pageSizeChange" @current-change="pageCurrentChange" :current-page="currentPage"
                :page-sizes="[10, 20, 30, 40]" :page-size="limit" layout="total, sizes, prev, pager, next, jumper"
                :total="totalPage">
            </el-pagination>
        </div>
    </div>
</div>